<template>
	<view class="flex-container main">
		<!-- 搜索 -->
		<app-search @toSearch="toSearch" :shows="false" @clickadd="add"></app-search>

		<!-- banner -->
		<view class="banner">
			<view class="banner-bg">
				<u-swiper height="268" :list="banner" imgMode="fill"></u-swiper>
				<ad-custom>123</ad-custom>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menu">
			<view class="menu-item" @click="toDrawing">
				<!-- <image :src="`${baseUrl}//menu1.png`" mode="scaleToFill"/> -->
				<image :src="$imgUrl('/menu1.png')" mode="scaleToFill" />
				<view>AI绘画</view>
			</view>
			<view class="menu-item" @click="toCartoon">
				<image :src="$imgUrl('/menu2.png')" mode="scaleToFill" />
				<view>人物动漫画</view>
			</view>
			<view class="menu-item" @click="toRepair">
				<image :src="$imgUrl('/menu3.png')" mode="scaleToFill" />
				<view>图像修复</view>
			</view>
			<view class="menu-item" @click="toBusinessCard">
				<image :src="$imgUrl('/menu4.png')" mode="scaleToFill" />
				<view>AR名片</view>
			</view>
		</view>
        <ad-custom unit-id="adunit-2dec9090f17cec3e" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		<view class="list">
			<view class="list-item" v-for="(i, index) in list" :key="index" @tap="onclickList(i.id)">
				<image class="list-item-img" v-if="i.url" :src="i.url" mode="scaleToFill" />
				<image class="list-item-img" v-else :src="$imgUrl('/1725513206439.jpg')" mode="scaleToFill" />
				<view class="list-item-name">{{ i.mc }}</view>
				<view class="list-item-date">{{ i.cjsj.substring(0, 10) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import appSearch from '@/components/app-search';
import { getLocationInf, getLocation } from '@/nxTemp/utils/locationUtils.js';
export default {
	components: { appSearch },
	data() {
		return { search: '', banner: [require('@/static/images/banrer.jpg')], list: [] };
	},
	onLoad() {
		this.getLocationAddress();
		this.getPhotoList();
		
	},
	methods: {
		adLoad() {
		  console.log('原生模板广告加载成功')
		},
		adError(err) {
		  console.error('原生模板广告加载失败', err)
		},
		adClose() {
		  console.log('原生模板广告关闭')
		},
		/**
		 * 获取轮播图
		 */
		async getBanner(){
		// 	let res = await this.$http.get('/app/lbt/list');
		
		// 		this.banner = res.list;
			
		},

		onShow(){
		
			if (uni.getStorageSync('token') !== null && uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') {
				this.getPhotoList()
			}

		},
		toAi() {
			uni.navigateTo({
				url: '/pages/subpackage/mp_authorization'
			});
		},
		//授权获取地址
		getLocationAddress() {
			getLocation()
				.then((result) => {
					console.log(result);
				})
				.catch((error) => {
					console.log(error);
				});
		},
		toSearch(message) {
			this.search = message;
			this.getPhotoList();
		},
		//  获取相册信息
		async getPhotoList() {
			let res = await this.$http.get('/app/xc/getSyXc', { mc: this.search });
			if (res.code == 0) {
				this.list = res.list;
			}
		},
		// 跳转详情页面
		onclickList(id) {
			uni.navigateTo({
				url: '/pages/photo/list?id=' + id
			});
		},
		toDrawing() {
			uni.navigateTo({
				url: '/pages/ai/drawing'
			});
		},
		toCartoon() {
			uni.navigateTo({
				url: '/pages/ai/cartoon'
			});
		},
		toRepair() {
			uni.navigateTo({
				url: '/pages/ai/repair'
			});
		},
		toBusinessCard() {
			uni.navigateTo({
				url: '/pages/ai/businessCard'
			});
		}
	}
};
</script>
<style>
page {
	background-color: #000;
}
</style>
<style lang="scss" scoped>
.main {
	height: 100%;
}

.list {
	display: flex;
	width: 700rpx;
	margin: 25rpx;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-between;

	&-item {
		margin: 16rpx 0;
		// background-image: url('../../static/image/photo_bg.png');
		background: url($imgUrl + '/photo_bg.png') no-repeat;

		background-size: 100% 100%;
		width: 340rpx;
		height: 340rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;

		&-img {
			width: 300rpx;
			height: 270rpx;
		}

		&-name {
			font-size: 24rpx;
			position: absolute;
			bottom: 80rpx;
			left: 30rpx;
			color: #fff;
		}

		&-date {
			font-size: 24rpx;
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			color: #fff;
		}
	}
}

.title {
	width: 180rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	view {
		line-height: 34rpx;
		font-size: 34rpx;
		color: #fff;
		font-weight: bold;
	}

	image {
		margin-top: 4rpx;
		width: 50rpx;
		height: 10rpx;
	}
}

.menu {
	height: 170rpx;
	// background-image: url('../../static/image/menu_bg.png');
	background: url($imgUrl + '/menu_bg.png') no-repeat;
	background-size: 100% 100%;
	width: 700rpx;
	margin: 40rpx 25rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;

	&-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			margin-top: 10rpx;
			width: 60rpx;
			height: 60rpx;
		}

		view {
			margin-top: 10rpx;
			color: #fff;
			font-size: 22rpx;
		}
	}
}

.banner {
	margin-top: calc(var(--status-bar-height) + 170rpx);
	display: flex;
	justify-content: center;
	align-items: center;

	&-bg {
		// background-image: url('../../static/image/banner_bg.png');
		background: url($imgUrl + '/banner_bg.png') no-repeat;
		background-size: 100% 100%;
		padding: 6rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		width: 700rpx;
		height: 280rpx;
	}
}
</style>
